<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head th:include="public/page_css::page_css ('查看客户档案详情')" />

<body>
<div class="layui-fluid larry-wrapper">
    <div class="layui-row layui-col-space30">
        <div class="layui-col-xs24">
            <section class="panel panel-padding">
                <form id="form1" class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><font color="red" style="margin-right:10px">*</font>客户编号</label>
                        <div class="layui-input-block">
                            <input type="text" name="khbh" required="required" jq-verify="required" jq-error="请输入客户编号" lay-verify="required" readonly placeholder="请输入客户编号" autocomplete="off" class="layui-input "/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><font color="red" style="margin-right:10px">*</font>客户名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="khmc" required="required" jq-verify="required" jq-error="请输入客户名称" lay-verify="required" readonly placeholder="请输入客户名称" autocomplete="off" class="layui-input "/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><font color="red" style="margin-right:10px">*</font>客户类型</label>
                        <div class="layui-input-block">
                            <select name="khlx" readonly>
                                <option value="0">收货人</option>
                            </select>
                        </div>

                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><font color="red" style="margin-right:10px">*</font>省份</label>
                        <div class="layui-input-block">

                            <input type="text" name="sheng" required="required" jq-verify="required"  lay-verify="required" reaautocomplete="off" class="layui-input "/>


                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><font color="red" style="margin-right:10px">*</font>城市</label>
                        <div class="layui-input-block">

                             <input type="text" name="shi" required="required" jq-verify="required" lay-verify="required"readonly autocomplete="off" class="layui-input "/>

                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><font color="red" style="margin-right:10px">*</font>路线</label>
                        <div class="layui-input-block">
                            <input type="text" name="lxmc" required="required" jq-verify="required"  lay-verify="required" placeholder="请输入客户名称" readonly autocomplete="off" class="layui-input "/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><font color="red" style="margin-right:10px">*</font>详细地址</label>
                        <div class="layui-input-block">
                            <input type="text" name="dz" required="required" jq-verify="required" jq-error="请输入详细地址"  lay-verify="required" placeholder="请输入详细地址" readonly autocomplete="off" class="layui-input "/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><font color="red" style="margin-right:10px">*</font>联系人姓名</label>
                        <div class="layui-input-block">
                            <input type="text" name="lxrxm" required="required" jq-verify="required" jq-error="请输入联系人姓名" lay-verify="required" placeholder="请输入联系人姓名" readonly autocomplete="off" class="layui-input "/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><font color="red" style="margin-right:10px">*</font>联系电话</label>
                        <div class="layui-input-block">
                            <input type="text" name="lxrdh" required="required" jq-verify="required" jq-error="请输入联系人电话" lay-verify="required" placeholder="请输入联系人电话" readonly  autocomplete="off" class="layui-input "/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><font color="red" style="margin-right:10px">*</font>客户等级</label>
                        <div class="layui-input-block">
                            <input type="text" name="khdj" required="required" jq-verify="required" jq-error="请输入客户等级" lay-verify="required" placeholder="客户等级" readonly autocomplete="off" class="layui-input "/>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">

                        </div>
                    </div>
                    <input type="hidden" th:value="${id}" id="id" name="id">
                </form>
            </section>
        </div>
    </div>
</div>
</body>
<div th:include="public/public_js::public_js"></div>

<script th:inline="javascript">
    $(function () {
        alert($("#id").val());
        var str = "<option>==请选择===</option>";
        $.ajax({
            type: "GET",
            url: "/zxbzwms/wmscityinfo/selectProvice/1",
            dataType: "JSON",
            async: false,
            success: function (data) {
                console.info(data);
                //从服务器获取数据进行绑定
                $.each(data, function (i, item) {
                    console.info("item.cityname"+item.cityname);
                    console.info(item.citycode);
                    str += "<option value=" + item.cityname + " code="+item.citycode+">" + item.cityname + "</option>";
                })
                //将数据添加到省份这个下拉框里面
                $("#sheng").append(str);

            },
            error: function () { alert("Error"); }
        });
        //加载城市
        layui.use('form', function(){
            var form = layui.form;
            form.on('select(sheng)', function(data){
                console.log(data.elem); //得到select原始DOM对象
                console.log(data.value); //得到被选中的值
                console.log(data.othis); //得到美化后的DOM对象
                var sheng = $("#sheng").find("option:selected").attr("code");
                //判断省份这个下拉框选中的值是否为空
                if (sheng == "") {
                    return;
                }
                $("#shi").html("");
                var str = "<option>==请选择===</option>";
                $.ajax({
                    type: "GET",
                    url: "/zxbzwms/wmscityinfo/selectProvice/"+sheng,
                    dataType: "JSON",
                    async: false,
                    success: function (data) {
                        //从服务器获取数据进行绑定
                        $.each(data, function (i, item) {
                            str += "<option value=" + item.cityname + ">" + item.cityname + "</option>";
                        })
                        console.info(str);
                        //将数据添加到省份这个下拉框里面
                        $("#shi").append(str);
                        console.info( $("#shi").html());
                        form.render('select');
                    },
                    error: function () { alert("Error"); }
                });

            });

            //各种基于事件的操作，下面会有进一步介绍
        });

    })
    function editSelect2(dom,value){

    }
</script>
<script>

    layui.use(['myform','zzpUtils','form','jquery'],function () {

        var form = layui.form,
            zzpUtils = layui.zzpUtils,
            $ = layui.jquery;

        //各种基于事件的操作，下面会有进一步介绍

        zzpUtils.select2({
            elem:".js-data-example-ajax",
            url:"/wmsgoodstype/getWmsGoodsTypeByHzId"
        });
        /*zzpUtils.selects({
         elem:"#sheng",
         url:"/wmscityinfo/selectProvice/1"
         });*/
        zzpUtils.select2({
            elem:"#lxid",
            url:"/zxbzwms/wmsCustomerFiles/baseSelectLine",
            // multiple:"multiple"
        });
        zzpUtils.action({
            url:"/wmsCustomerFiles/findOne",
            data: JSON.stringify({id:$("#id").val()}),
            success:function (data) {
                $("#sheng").append(  "<option value=" + data.sheng + ">" + data.sheng + "</option>");
                $("#shi").append(  "<option value=" + data.shi + ">" + data.shi + "</option>");
                form.render('select');
                zzpUtils.loadJsonDataToForm(data);
            },error: function (xhr, textStatus) {
                console.log(textStatus);
                console.log(xhr)
            }
        });


    });
</script>
</html>